<div class="card name-panel" *ngIf="record && name">
  <div class="card-header">
    <div class="row">
      <div class="col-sm-6 name-title">
        <div class="type-label" *ngIf="link">{{record.typeLabel | translate}}</div>
        <h2 class="h3 my-0 name-label">
          <span class="type-label" *ngIf="!link">{{record.typeLabel | translate}}</span>
          <a [routerLink]="record.link | localize" class="body-link cred-link name" *ngIf="link">{{name.text}}</a>
          <div class="badge badge-warning" *ngIf="name && name.inactive" translate>cred.inactive</div>
        </h2>
      </div>
      <div class="col-sm-6 name-issuer form-inline">
        <label class="issuer-label d-none" translate>cred.issuer</label>
        <div class="form-field">
          <a [routerLink]="['/issuer', issuer.id] | localize" class="body-link issuer-link" title="'cred.issuer' | translate">{{issuer.name}}</a>
        </div>
      </div>
    </div>
  </div>
  <div class="card-body form-body">
    <div class="row form-group">
      <div class="col-sm-6">
        <label class="control-label" translate>attribute.entity_type</label>
        <div class="form-field">
          <attribute-view [record]="record.attribute_map.entity_type"></attribute-view>
          <div *ngIf="remote_name">
            ( {{remote_name?.text}} )
          </div>
        </div>
        <label class="control-label" translate>topic.source-id</label>
        <div class="form-field text-identifier">
          {{record.source_id}}
        </div>
      </div>
      <div class="col-sm-6 mt-3 mt-sm-0">
        <label class="control-label" translate>attribute.entity_status</label>
        <div class="form-field">
          <attribute-view [record]="record.attribute_map.entity_status"></attribute-view>
        </div>
        <label class="control-label" translate>attribute.registration_date</label>
        <div class="form-field">
          <attribute-view [record]="record.attribute_map.registration_date" format="date"></attribute-view>
        </div>
      </div>
    </div>
    <div class="row mt-3 mt-lg-0">
      <div class="col col-md-10 col-lg-8">
        <label class="control-label" translate>general.details</label>
        <div class="form-field">
          <div class="row mb-2 mb-sm-1">
            <label class="col-md-4 mb-0" translate>cred.date</label>
            <div class="col-md-8"  *ngIf="name.last_updated > '0100-01-01'; else ifBlank">
              <span class="claim-info date">{{name.last_updated | dateFormat: 'effectiveDateTime'}}</span>
            </div>
            <ng-template #ifBlank>
              <div class="col-sm-8">{{'cred.empty-attribute' | translate}}</div>
            </ng-template>
          </div>
          <div class="row mb-2 mb-sm-1">
            <label class="col-md-4 mb-0" translate>attribute.entity_name_effective</label>
            <div class="col-sm-8">
              <attribute-view [record]="record.attribute_map.entity_name_effective"></attribute-view>
            </div>
          </div>
          <div class="row mb-2 mb-sm-1">
            <label class="col-md-4 mb-0" translate>attribute.entity_status_effective</label>
            <div class="col-sm-8">
              <attribute-view [record]="record.attribute_map.entity_status_effective"></attribute-view>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
